<template>
  <div class="page-box">
    <div class="page-search">
      <div>
        <label>采购单号</label>
        <el-input v-model="searchForm.Number" style="width: 160px;" placeholder="请输入采购单号"></el-input>
      </div>
      <div>
        <label>入货仓</label>
        <el-select v-model="searchForm.WarehouseId" style="width: 160px;" placeholder="请选择入货仓" >
          <el-option v-for="Warehouse in WarehouseList" :key="Warehouse.Id" :label="Warehouse.WarehouseName"
            :value="Warehouse.Id"></el-option>
        </el-select>
      </div>
      <div>
        <label>供应商</label>
        <el-select v-model="searchForm.VendorId" style="width: 160px;" placeholder="请选择出库仓" >
          <el-option v-for="Vendor in VendorList" :key="Vendor.Id" :label="Vendor.VendorName"
            :value="Vendor.Id"></el-option>
        </el-select>
      </div>
      <div>
          <label>订单状态</label>
          <el-select v-model="searchForm.Status" style="width: 160px;" placeholder="请选择单据状态" allow-create filterable>
              <el-option label="全部" value="-1"></el-option>
              <el-option label="待审核" value="0"></el-option>
              <el-option label="已审核" value="1"></el-option>
              <el-option label="已入库" value="2"></el-option>
          </el-select>
      </div>
      <div>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>

    <div class="page-section">
      <div class="page-tool">
        <el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
        <el-button type="danger" plain icon="el-icon-delete" @click="dels" size="small">批量删除</el-button>
        <el-dropdown class="mg-l">
                            <el-button size="small" type="primary" plain>
                                <i class="el-icon-s-grid"></i> 
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="exports"><i class="el-icon-receiving"></i>导出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
      </div>

      <!--表单-->
      <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column fixed prop="Number" label="采购单编号" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="VendorName" label="供应商" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="WarehouseName" label="入货仓" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="DeliveryDate" label="交货日期" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.DeliveryDate | formatDateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Status" label="采购状态" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-tag type="info" v-if="Number(scope.row.Status) === 0">待审核</el-tag>
            <el-tag type="success" v-else-if="Number(scope.row.Status) === 1">已审核</el-tag>
            <el-tag type="danger" v-else-if="Number(scope.row.Status) === 2">已入库</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="CreateTime" label="创建时间" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.CreateTime | formatDateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="State" label="货物状态" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.State == '0'">未到货</el-tag>
            <el-tag type="success" v-else-if="scope.row.State == '1'">部分到货</el-tag>
            <el-tag type="danger" v-else-if="scope.row.State == '2'">全部到货</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" :show-overflow-tooltip="true" width="220">
          <template slot-scope="scope">
            <el-button type="text" @click="update(scope.row)"
              :disabled="Number(scope.row.Status) === 1 || Number(scope.row.Status) === 2">编辑</el-button>
            <el-button type="text" @click="del(scope.row)"
              :disabled="Number(scope.row.Status) === 1 || Number(scope.row.Status) === 2">删除</el-button>
            <el-button type="text" @click="details(scope.row)">明细</el-button>
            <el-button type="text" @click="AuditSale(scope.row)"
              :disabled="Number(scope.row.Status) === 1 || Number(scope.row.Status) === 2">审核</el-button>
            <el-button type="text" @click="CounterSale(scope.row)"
              :disabled="Number(scope.row.Status) === 0 || Number(scope.row.Status) === 2">反审</el-button>
          </template>
        </el-table-column>
      </el-table>

      
    <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
      :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />
    </div>


    <!--单窗-->
    <el-dialog :close-on-click-model="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
      width="60%" @close="closeDialog">
      <OrderPoInput :VendorList="VendorList" :WarehouseList="WarehouseList" :model="model" :isUpdate="isUpdate"
        @callback="callback" v-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 0" />
      <OrderPoItemDetails v-else-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 1" :model="model" />

    </el-dialog>
  </div>
</template>

<script>
import OrderPoInput from './components/OrderPoInput.vue'
import Pagination from '@/components/Pagination.vue';
import OrderPoItemDetails from './components/OrderPoItemDetails.vue';


export default {
  components: {
    OrderPoInput,
    OrderPoItemDetails,
    Pagination
  },
  mounted() {
    this.dataBind();
  },
  data() {

    return {
      WarehouseList: [],
      VendorList: [],
      searchForm: {
        Number: '',
        VendorId: '',
        WarehouseId: '',
        Status:'-1',
      },

      dialogDomain: {
        title: '添加采购订单',
        dialogVisible: false,
        dialogType: 0
      },

      isUpdate: false,
      model: {
        Number: '',
        VendorId: '',
        VendorName: '',
        WarehouseId: '',
        WarehouseName: '',
        DeliveryDate: '',
        Status: '0',
        CreateTime: '',
        State: '0',
        Remark: '',
      },

      pageDomain: {
        PageIndex: 1,
        PageSize: 10,
        TotalCount: 0
      },
      tableData: [],
      isLoading: false,

    }

  },
  created() {
    this.GetOrderPoSelectData();
  },
  methods: {
    //审核
    AuditSale(model) {
      this.$confirm('确定更改选中的数据吗？ 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http.putForm('/api/OrderPo/UpdateOrderPoStatus', {
            id: model.Id,
            Status: "1" // 将状态设置为已审核
          })
            .then((res) => {
              this.showNotify('操作成功', 'success');
              this.dataBind();
            })
        }).catch(() => { });
    },
    //反审
    CounterSale(model) {
      this.$confirm('确定更改选中的数据吗？ 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http.putForm('/api/OrderPo/UpdateOrderPoStatus', {
            id: model.Id,
            Status: "0" // 将状态设置为待审核
          })
            .then((res) => {
              this.showNotify('操作成功', 'success');
              this.dataBind();
            })
        }).catch(() => { });

    },
    details(model) {
      this.dialogDomain.title = "采购单明细";
      this.dialogDomain.dialogVisible = true;
      this.dialogDomain.dialogType = 1;
      this.model = model;
    },
    add() {
      this.dialogDomain.title = "添加采购单";
      this.dialogDomain.dialogVisible = true;
      this.dialogDomain.dialogType = 0;
      this.isUpdate = false;
    },
    update(model) {
      this.dialogDomain.title = "编辑采购单";
      this.dialogDomain.dialogVisible = true;
      this.isUpdate = true;
      this.dialogDomain.dialogType = 0;
      model.State = model.State.toString();
      model.Status = model.Status.toString();
      this.model = model;
    },
    //批量删除
    dels() {
      if (this.$refs.dataForm.selection.length <= 0) {
        this.showNotify('请先选择一项')
        return;
      }
      this.$confirm('确定删除选中的数据及其子项吗？这将不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {

          //获取选中的表格数据 并筛选id
          var ids = this.$refs.dataForm.selection.map(x => x.Id)

          //拼接参数
          let params = new URLSearchParams();
          params.append('ids', ids.join(','))

          this.$http.delete('/api/OrderPo/DelAll', {
            data: params,
            headers: {
              'content-Type': 'application/x-www-form-urlencoded'
            },
            loading: this.$loading()
          })
            .then((res) => {
              this.showNotify('操作成功', 'success'); // 删除成功的提示
              this.dataBind(); // 重新绑定数据
            })
            .catch((error) => {
              console.error('删除请求出错:', error);
              this.showNotify('删除请求出错', 'error');
            });
        }).catch(() => { });

    },
    //删除单条
    del(model) {
      this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http.delete('/api/OrderPo', {
            data: {
              Id: model.Id
            },
            headers: {
              'content-Type': 'application/x-www-form-urlencoded'
            }
          })
            .then((res) => {
              this.showNotify('操作成功', 'success');
              this.dataBind();
            })
        }).catch(() => { });
    },
//导出
    exports(){
      this.$confirm('即将导出报表，是否继续？', '系统提示', {
                confirmButtonText: '导出',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.request({
                    method: "GET",
                    loading:this.$loading(),
                    url: "/api/OrderPo/Export",
                    responseType: 'blob'
                }).then((res)=>{
                    const blob = new Blob([res])
                    const downloadElement = document.createElement('a');
                    const href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = '采购订单信息.xls'; //下载后文件名
                    downloadElement.click(); //点击下载
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
                

            }).catch((err)=>{
                console.log(err);
            })
    },
    //对话框关闭事件
    closeDialog() {
      this.model = {
        Number: '',
        VendorId: '',
        VendorName: '',
        WarehouseId: '',
        WarehouseName: '',
        DeliveryDate: '',
        Status: '0',
        CreateTime: '',
        State: '0',
        Remark: '',
      }
    },
    search() {
      this.pageDomain.PageIndex = 1;
      this.dataBind();
    },
    reset() {
      this.searchForm.Number = '';
      this.searchForm.VendorId = '';
      this.searchForm.WarehouseId = '';
    },
    //新增或编辑页面回调
    callback() {
      let actionName = this.isUpdate ? '编辑' : '新增';
      this.showNotify(actionName + '成功', 'success');
      this.dialogDomain.dialogVisible = false;
      this.dataBind();
    },
    dataBind() {
      this.isLoading = true;
      this.$http.get('/api/OrderPo',
        {
          params: {
            PageIndex: this.pageDomain.PageIndex,
            PageSize: this.pageDomain.PageSize,
            Number: this.searchForm.Number,
            VendorId: this.searchForm.VendorId,
            WarehouseId: this.searchForm.WarehouseId,
            Status:this.searchForm.Status
          }
        })
        .then(res => {
          this.tableData = res.Data;
          this.pageDomain.TotalCount = res.Count;
          this.isLoading = false;
        })
    },
    GetOrderPoSelectData() {
      this.$http.get('./api/Integrated/GetOrderPoSelectData')
        .then(res => {
          console.log(res.Data);
          this.VendorList = res.Data.VendorList;
          this.WarehouseList = res.Data.WarehouseList;
        })
    },
    //分页方法
    handleSizeChange(val) {
      this.pageDomain.PageIndex = 1;
      this.pageDomain.PageSize = val;
      this.dataBind();
    },
    handleCurrentChange(val) {
      this.pageDomain.PageIndex = val;
      this.dataBind();
    }
  }

}
</script>

